<template>
	<view class="u-rela">
		<view class="card-bg-w u-border-top" style="padding-bottom:10rpx;">
			<u-search :input-style="{fontSize:'28rpx'}" placeholder="请输入关键字搜索企业" v-model="keyword" :show-action="false"
				height="80"
				search-icon="https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/icon-search.png"
				@search='onSearch' @blur='onBlur'></u-search>
		</view>
		<view style="background:#fff;">
			<u-dropdown title-size="28">
				<u-dropdown-item v-model="value1" title="所在区域" :options="options1"
					@change='handlerOptions1'></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="行业分类" :options="options2"
					@change='handlerOptions2'></u-dropdown-item>
				<!-- <u-dropdown-item v-model="value3" title="企业福利" :options="options3"></u-dropdown-item> -->
			</u-dropdown>
		</view>
		<!-- 企业列表 -->
		<navigator :url="`/pages/recruit/company?type=job&company_id=${item.company_id}`"
			class="company-item u-flex u-col-top"
			v-for="(item,index) in (value1 == 0 && value2 == 0) ? (flag ? search_companyList : companyList) : (flag ? search_companyList : companyList_new)"
			:key="item.company_id">
			<div class="img-wrap u-flex u-row-center">
				<u-image
					:src="item.logo == '' ? 'https://nmlwx.sowreap.cn/nongmuWeChatImage/static/images/recruit/company-img.png' : item.logo"
					width="66rpx" height="66rpx"></u-image>
			</div>
			<div class="right u-m-l-20 u-flex-1">
				<div class="u-flex">
					<view class="title u-line-1">{{item.name}}</view>
					<div :class="item.certified?'certified-bg':'not-certified-bg'">{{item.is_certification?'认证':'未认证'}}
					</div>
				</div>
				<div class="u-flex u-m-t-8">
					<text class="label-item" v-for="(item2,index2) in item.tag" :key="index2">{{item2}}</text>
				</div>
				<div class="u-flex u-border-top u-m-t-20 u-p-t-20">
					<div class="text-bg">热招</div>
					<text class="u-font-24 u-content-color u-m-l-20">{{item.hot.join('.')}}</text>
				</div>
			</div>
		</navigator>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				keyword: '',
				value1: 0,
				value2: 0,
				value3: 0,
				options1: [

				],
				options2: [

				],
				options3: [{
						label: '带薪休假',
						value: 1,
					},
					{
						label: '五险一金',
						value: 2,
					},
				],
				companyList: [

				],

				options1_label: '',
				options2_label: '',
				companyList_new: [],
				flag: false,
				search_companyList: []
			}
		},
		onLoad() {
			// 数据初始化
			this.dataInit()
		},
		onPullDownRefresh() {
			// 数据初始化
			this.dataInit()
		},
		methods: {
			// 数据初始化
			dataInit() {
				// 公司列表
				this.get_recruit_companyList();

				// 行业列表
				this.get_recruit_industry();

				// 工作区域
				this.get_recruit_jobArea()
			},

			// 公司列表
			get_recruit_companyList() {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.recruit_companyList,
					method: 'GET',
				}).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.code == 1) {
						this.companyList = res.data.list
					}
				})
			},

			// 行业列表
			get_recruit_industry() {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.recruit_industry,
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.options2 = res.data.map(e => {
							return {
								label: e.title,
								value: e.id
							}
						})
						this.options2.unshift({
							label: '不限',
							value: 0
						})
					}
				})
			},

			// 工作区域
			get_recruit_jobArea() {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.recruit_jobArea,
					method: 'GET'
				}).then(res => {
					if(res.code == 1){
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.options1 = res.data.map((e, index) => {
							return {
								label: e,
								value: index + 1
							}
						})
						this.options1.unshift({
							label: '不限',
							value: 0
						})
					}
				})
			},

			// 所在区域
			handlerOptions1(e) {
				this.companyList_new = []
				let name_i = this.options1.filter(i => i.value == e)
				this.value1 = name_i[0].value
				if (this.value1 == 0) {
					if (this.value2 == 0) {
						this.companyList_new = []
					} else if (this.value2 != 0) {
						this.companyList_new = this.companyList.filter(item => item.industry == this.options2_label)
					}
				} else if (this.value1 != 0) {
					if (this.value2 == 0) {
						this.options1_label = name_i[0].label
						this.companyList_new = this.companyList.filter(item => {
							return item.area == this.options1_label
						})
					} else if (this.value2 != 0) {
						this.options1_label = name_i[0].label
						this.companyList_new = this.companyList.filter(item => {
							return item.area == this.options1_label && item.industry == this.options2_label
						})
					}
				}

			},

			// 行业分类
			handlerOptions2(e) {
				this.companyList_new = []
				let name_i = this.options2.filter(i => i.value == e)
				this.value2 = name_i[0].value
				if (this.value2 == 0) {
					if (this.value1 == 0) {
						this.companyList_new = []
					} else {
						this.companyList_new = this.companyList.filter(item => item.area == this.options1_label)
					}
				} else if (this.value2 != 0) {
					if (this.value1 == 0) {
						this.options2_label = name_i[0].label;
						this.companyList_new = this.companyList.filter(item => {
							return item.industry == this.options2_label
						})
					} else if (this.value1 != 0) {
						this.options2_label = name_i[0].label;
						this.companyList_new = this.companyList.filter(item => {
							return item.area == this.options1_label && item.industry == this.options2_label
						})
					}
				}

			},

			// 搜索企业
			onSearch(e) {
				console.log(e);
				if (e == '') {
					uni.showToast({
						icon: "none",
						title: '请输入企业名字关键字!',
						duration: 2000
					})
				} else {
					const regex = new RegExp(`${e}`, 'g');
					if (this.value1 == 0 && this.value2 == 0) {
						this.flag = true
						this.search_companyList = this.companyList.filter(el => regex.test(el.name))
					} else {
						this.flag = true
						this.search_companyList = this.companyList_new.filter(el => regex.test(el.name));
					}
				}
			},

			// 输入框失去焦点时触发
			onBlur() {
				let that = this
				if (this.keyword == '') {
					this.flag = false
				} else {
					const regex = new RegExp(`${that.keyword}`, 'g');
					if (this.value1 == 0 && this.value2 == 0) {
						this.flag = true
						this.search_companyList = this.companyList.filter(el => regex.test(el.name))
					} else {
						this.flag = true
						this.search_companyList = this.companyList_new.filter(el => regex.test(el.name));
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		min-height: 100vh;
		z-index: 1;
	}

	/deep/ .u-icon__img {
		width: 66rpx !important;
		height: 66rpx !important;
	}

	/deep/ .u-icon-wrap {
		order: 1;
	}

	/deep/ .u-dropdown__menu__item {
		font-weight: 700;
	}

	.company-item {
		width: 710rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		position: relative;
		box-sizing: border-box;

		.title {
			font-size: 34rpx;
			font-weight: 700;
			max-width: 440rpx;
		}

		.text-bg {
			background: #F3F3F3;
			border-radius: 17rpx;
			padding: 8rpx 12rpx;
			font-size: 20rpx;
			color: #999999;
			margin-left: 6rpx;
		}

		.icon-7 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}


		.label-item {
			border: 1px solid #DDDDDD;
			border-radius: 5rpx;
			padding: 8rpx 10rpx;
			font-size: 20rpx;
			color: #999999;
			margin-right: 10rpx;
		}

		.img-wrap {
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 50%;
		}
	}

	.certified-bg {
		width: 60rpx;
		height: 34rpx;
		background: #E6F8EE;
		border: 1px solid #B5F4D1;
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #07C160;
		margin-left: 10rpx;
	}

	.not-certified-bg {
		width: 80rpx;
		height: 34rpx;
		background: #FFF3E5;
		border: 1px solid #FFE6C8;
		display: flex;
		border-radius: 17px;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #FF8B02;
		margin-left: 10rpx;
	}

	/deep/ scroll-view {
		height: 50vh !important;
	}
</style>

<style>
	page {
		padding: 0;
	}
</style>